<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流程批量审批定义设置管理-编辑</title>
    <#include "/pubHeadStyle.html">
</head>
<body>
<div class="ccpui-tablesize" style="padding:10px;">
        <form class="layui-form" action="" lay-filter="template" id="bpmBatchApprovalForm">
            <table class="table-detail">
                <tr >
                    <th style="width: 20%">流程定义：</th>
                    <td>
                        <input type="hidden" id="modelKey" name="modelKey" />
                        <input type="hidden" id="id" name="id" />
                        <input disabled type="text" name="subject" id="subject1" class="layui-input filter-value" value=""
                               autocomplete="off" style="float: left;margin-right: 10px"/>
                        <a class="layui-btn layui-btn-sm " id="flowChoose">选择</a>
                        <a class="layui-btn layui-btn-sm " id="flowReset">重置</a>
                    </td>
                </tr>
                <tr >
                    <th>节点名称：</th>
                    <td>
                        <input type="hidden" id="nodeId" name="nodeId" />
                        <input disabled type="text" name="name" id="name" class="layui-input filter-value" value="" autocomplete="off" style="float: left;margin-right: 10px"/>
                        <a class="layui-btn layui-btn-sm " id="nodeChoose">选择</a>
                        <a class="layui-btn layui-btn-sm " id="nodeReset">重置</a>
                    </td>
                </tr>
            </table>
            <input type="hidden" id="tableId" name="tableId" value="" />
            <textarea id="fieldJson" name="fieldJson" rows="1" cols="1" style="display: none;"></textarea>

        </form>
        <div style="margin:10px 0">
            <p>列表字段设置</p>
        </div>
    <div style="height: 350px;overflow: auto">
        <table id="nodeList" lay-filter="nodeList" class="layui-table">
            <thead>
            <tr>
                <th width="5%" style="text-align: center">序号</th>
                <th width="10%" style="text-align: center">字段名</th>
                <th width="10%" style="text-align: center">列名</th>
                <th width="5%" style="text-align: center">是否显示</th>
                <th width="5%" style="text-align: center">排序</th>
            </tr>
            </thead>
            <tbody id="fieldBody">

            </tbody>
        </table>
    </div>

    </div>
    <script type="text/html" id="sortBar">
        <!--排序-->
        <a alt='上移' href='javascript:;' class='link moveup '    onclick="sortTr(this,true)" style="width: 20px;height: 20px;"><i class="iconfont iconlong-arrow-up"></i></a>
        <a alt='下移' href='javascript:;' class='link movedown '  onclick="sortTr(this,false)" ><i class="iconfont iconlong-arrow-down"></i></a>
    </script>
    <script>
        layui.config({
            base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
        }).use(['index','form', 'table', 'layer','setter','commons'], function () {
            var form = layui.form, layer = layui.layer, setter = layui.setter;
            var table = layui.table;
            var commons = layui.commons;
            var $ = layui.$;

            var id = "${bpmBatchApproval.id}";
            var fieldJson = new Array();
            fieldJson.push(${bpmBatchApproval.fieldJson});
            if (fieldJson){
                form.val("template", {
                    "id": "${bpmBatchApproval.id}", // "name": "value"
                    "modelKey": "${bpmBatchApproval.modelKey}", // "name": "value"
                    "subject": "${bpmBatchApproval.subject}", // "name": "value"
                    "nodeId": "${bpmBatchApproval.nodeId}", // "name": "value"
                    "name": "${bpmBatchApproval.nodeName}", // "name": "value"
                    "tableId": "${bpmBatchApproval.tableId}", // "name": "value"
                    "fieldJson": JSON.stringify(fieldJson), // "name": "value"
                })
                $("#tableId").val('${bpmBatchApproval.tableId}');

                if (fieldJson[0] == null || fieldJson[0].length == 0) {
                    var nullHtml = "<tr><td colspan='5'>未获取表单字段，请检查流程是否设置表单。</td></tr>";
                    $("#fieldBody").append(nullHtml);
                } else {
                    $("#fieldBody").empty();
                    var trHtml = "";
                    $.each(fieldJson[0], function (index, field) {
                        var trStart = '<tr var="fieldTr">';
                        var td1 = '<td  id="index" class=index">' + (index + 1) + '</td>';
                        var td2 = '<td  name="fieldName">' + field.fieldName + '</td>';
                        var td3 = '<td ><input type="text" name="fieldDesc" class="inputText" value="' + field.fieldDesc + '"/></td>';
                        var td4 = "";
                        if (field.isShow == 1) {
                            td4 = '<td ><input name="isShow" type="checkbox" value="1" checked="checked"></td>';
                        } else {
                            td4 = '<td ><input name="isShow" type="checkbox" value="1"></td>';
                        }
                        var move = '<a class="link moveup" href="javascript:;" title="上移" onclick="moveTr(this,true)"><i class="iconfont iconlong-arrow-up"></i></a><a class="link movedown" href="javascript:;"  title="下移" onclick="moveTr(this,false)"><i class="iconfont iconlong-arrow-down"></i></a>';
                        var td5 = '<td>' + move + '</td>';
                        var trEnd = '</tr>';
                        trHtml = trHtml + trStart + td1 + td2 + td3 + td4 + td5 + trEnd;
                    });
                    $("#fieldBody").append(trHtml);
                }
            }

            //流程选择
            $("#flowChoose").on("click",function () {
                parent.layer.open({
                    type: 2,
                    area: ['950px', '620px'],
                    title: ['流程选择'],
                    btn:["选择","关闭"],
                    skin: 'btn-class',
                    content:serverPath.workflowPath+ setter.workflowLinkPath +'actDefModel/view/selector',
                    yes:function (index,layero) {
                        //获取iframe的body元素
                        var body = parent.layer.getChildFrame('body',index);
                        //得到iframe页的窗口对象
                        var iframeWin = parent.window[layero.find('iframe')[0]['name']];
                        //执行iframe页的showMsg方法
                        $("#subject1").val(body.find("input[name=selectedFlowName]").val());
                        $("#modelKey").val(body.find("input[name=selectedFlowKey]").val());
                        $("#name").val("");
                        $("#nodeId").val("");
                        $("#fieldBody").html("");
                        var nullHtml = "<tr><td colspan='5'>未获取表单字段，请检查流程是否设置表单。</td></tr>";
                        $("#fieldBody").append(nullHtml);
                        parent.layer.close(index);
                    }
                });
            });

            //重置
            $("#flowReset").click(function () {
                $('#modelKey').val('');
                $('#subject1').val('');
                $('#nodeId').val('');
                $('#name').val('');
            });

            //节点选择
            $("#nodeChoose").click(function () {
                var model = $("#modelKey").val();
                if (model == null || model == ''){
                    layer.msg("请先选择流程定义!",{icon:5});
                    return;
                }
                parent.layer.open({
                    type: 2,
                    area: ['650px', '500px'],
                    title: ['节点选择'],
                    btn:["选择","关闭"],
                    skin: 'btn-class',
                    content:serverPath.workflowPath+ setter.workflowLinkPath +'bpmNodeSet/view/selector?modelKey='+ model,
                    yes:function (index,layero) {
                        //获取iframe的body元素
                        var body = parent.layer.getChildFrame('body',index);
                        //得到iframe页的窗口对象
                        var iframeWin = parent.window[layero.find('iframe')[0]['name']];
                        //执行iframe页的showMsg方法
                        $("#name").val(body.find("input[name=selectedNodeName]").val());
                        $("#nodeId").val(body.find("input[name=selectedNodeId]").val());
                        setFields();
                        parent.layer.close(index);
                    }
                });
            });
            //重置
            $("#nodeReset").click(function () {
                $('#nodeId').val('');
                $('#name').val('');
            });

            //列表字段設置
            function setFields() {
                var modelKey = $("#modelKey").val(), nodeId = $('#nodeId').val(), fieldJson = $('#fieldJson').val();
                if (modelKey == null || modelKey == '') {
                    return;
                }
                if (nodeId == null || nodeId == '') {
                    return;
                }
                var url = serverPath.workflowPath + setter.workflowLinkPath + "bpmBatchApproval/fieldJsonData?modelKey="+modelKey+ "&nodeId="+nodeId;
                // $.post(url, {fieldJson: fieldJson}, getFieldJson, "json");
                $.ajax({
                    url:url
                    ,method:'post'
                    ,data:{
                        modelKey:$("input[name=modelKey]").val(),
                        nodeId:$("input[name=nodeId]").val(),
                    }
                    ,dataType:'json'
                    ,success:function (res) {
                        if(commons._filterRecord(res)) {
                            getFieldJson(res);
                            layer.msg(res.msg, {icon: 6, time: 1000});
                        }else {
                            layer.msg(res.msg, {icon: 5, time: 1000})
                        }
                    }
                })

            }

            function getFieldJson(data) {
                if (data.code == 0) {
                    // flag = true;
                    $("#tableId").val(data.data.tableId);
                    var filedJson = data.data.bpmFieldList;

                    if (filedJson == null || filedJson.length == 0) {
                        var nullHtml = "<tr><td colspan='5'>未获取表单字段，请检查流程是否设置表单。</td></tr>";
                        $("#fieldBody").append(nullHtml);
                    } else {
                        $("#fieldBody").empty();
                        var trHtml = "";
                        $.each(filedJson, function (index, field) {
                            var trStart = '<tr var="fieldTr">';
                            var td1 = '<td  id="index" class=index">' + (index + 1) + '</td>';
                            var td2 = '<td  name="fieldName">' + field.fieldName + '</td>';
                            var td3 = '<td ><input type="text" name="fieldDesc" class="inputText" value="' + field.fieldDesc + '"/></td>';
                            var td4 = "";
                            if (field.isShow == 1) {
                                td4 = '<td ><input name="isShow" type="checkbox" value="1" checked="checked"></td>';
                            } else {
                                td4 = '<td ><input name="isShow" type="checkbox" value="1"></td>';
                            }
                            var move = '<a class="link moveup" href="javascript:;" title="上移" onclick="moveTr(this,true)"><i class="iconfont iconlong-arrow-up"></i></a><a class="link movedown" href="javascript:;"  title="下移" onclick="moveTr(this,false)"><i class="iconfont iconlong-arrow-down"></i></a>';
                            var td5 = '<td>' + move + '</td>';
                            var trEnd = '</tr>';
                            trHtml = trHtml + trStart + td1 + td2 + td3 + td4 + td5 + trEnd;
                        });
                        $("#fieldBody").append(trHtml);
                    }
                }
                // if (!data.success) {
                //     flag = false;
                // }
            }
            // function nodeList(modelKey,nodeId) {
                // table.render({
                //     elem: '#nodeList'
                //     , url: serverPath.workflowPath + setter.workflowLinkPath + "bpmBatchApproval/fieldJsonData?modelKey="+modelKey+ "&nodeId="+nodeId
                //     , page: false
                //     , cols: [[
                //         {type: 'numbers', title: '序号', align: "center"}
                //         , {field: 'fieldDesc', title: '字段名', align: "center"}
                //         , {field: 'fieldName', title: '列名', align: "center",templet: function () {
                //                 // return '<input type="text" id="fieldName" name="fieldName" class="layui-input">'
                //             }}
                //         , {fixed: 'isShow', title: '是否显示', width: 250, align: 'center',templet: function () {
                //                 // return '<input type="checkbox" id="isShow" name="isShow" class="layui-input">'
                //             }}
                //         , {fixed: 'sn', title: '排序', toolbar: '#sortBar', width: 250, align: 'center'}
                //     ]]
                // })
            // }

            function save() {
                var fieldJson = getJsonArrStr();
                $('#fieldJson').val(fieldJson);
            }

            function getJsonArrStr() {
                var json = [];
                $("#fieldBody tr[var='fieldTr']").each(function (i) {
                    var me = $(this), obj = {};
                    obj.fieldName = $("[name='fieldName']", me).html();
                    obj.fieldDesc = $("[name='fieldDesc']", me).val();
                    obj.isShow = $("[name='isShow']:checked", me).val() == 1 ? '1' : '0';
                    obj.sn = (i + 1) + "";
                    json.push(obj);
                });
                return JSON.stringify(json);
            }
            window.moveTr=function (obj,up){
                var thisTr = $(obj).parents("tr");
                if(up){
                    var prevTr = $(thisTr).prev();
                    if(prevTr){
                        thisTr.insertBefore(prevTr);
                    }
                } else {
                    var nextTr = $(thisTr).next();
                    if(nextTr){
                        thisTr.insertAfter(nextTr);
                    }
                }
            };
        })
    </script>
</body>
</html>